<style lang="scss">
.stadium {
  .stadiumSearchFrom {
    .el-form-item {
      margin: 0;
    }
    .el-form-item__label {
      font-size: 18px;
    }
    .el-input__wrapper {
      width: 260px;
    }
    .el-button {
      padding-left: 30px;
      padding-right: 30px;
    }
  }
  .venuesList {
    .el-collapse-item__header {
      padding: 0 25px;
      height: 60px;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
    .el-collapse-item__arrow {
      font-size: 30px;
      color: #aaa;
    }
    .demo-collapse-item {
      position: relative;
      border: no;
      .el-collapse {
        border: 0;
      }
      #el-collapse-head-9907 {
        border-bottom: 0;
      }
      .el-collapse-item__header {
        padding-left: 100px;
        padding-right: 25px;
        height: 46px;
      }
      .el-collapse-item__arrow {
        position: absolute;
        left: 70px;
      }
      .el-collapse-item__arrow {
        font-size: 25px;
      }
    }
  }

  .studModel {
    .my-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    /* 上传图标样式 */
    .avatar-uploader .avatar {
      width: 100px;
      height: 100px;
      object-fit: cover;
      display: block;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      text-align: center;
    }
    /* 上长图标样式ed */
    .el-form-item {
      width: 90%;
    }

    .right {
      .bm-view {
        width: 100%;
        height: 500px;
      }
    }
    .el-dialog__header {
      margin: 0;
      border: 1px solid #ccc;
      padding: 10px;
    }
    .el-dialog__title {
      display: flex;
      align-items: center;
      font-size: 25px;
      color: #aaa;
    }
  }
}
</style>

<style scoped lang="scss">
.stadium {
  height: 100%;
  background-color: #f5f5f5;
  padding: 0 40px;
  user-select: none;

  header {
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    color: #606060;
    span {
      font-size: 18px;
      font-weight: 500;
      color: black;
    }
  }
  .stadiumSearch {
    height: 80px;
    background-color: white;
    box-shadow: 2px 2px 5px #ccc;
    border-bottom: 1px solid #ccc;
    .stadiumSearchFrom {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;
    }
  }
  .venues {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    span:first-of-type {
      font-size: 20px;
      font-weight: 400;
      display: flex;
      align-items: center;

      .itemList {
        color: #fdd869;
        margin-right: 10px;
      }
    }
    span:last-of-type {
      display: block;
      padding: 7px 16px;
      color: white;
      font-size: 14px;
      background-color: #82dedc;
      border-radius: 10px;
      cursor: pointer;
    }
  }
  .venuesList {
    background-color: white;
    box-shadow: 2px 2px 5px #ccc;
    border-bottom: 1px solid #ccc;
    .titleLeft {
      display: flex;
      align-items: center;
      font-size: 18px;
      .mark {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #fdd869;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        font-size: 14px;
      }
      .titleAddress {
        font-size: 15px;
        position: absolute;
        left: 600px;
      }
    }
    .venuesListInfo {
      background-color: #fafafa;
      height: 100px;
      display: flex;
      padding: 20px 0;
      box-sizing: border-box;
      border-bottom: 1px dashed #aaa;
      .venuesListInfoItem {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 1px dashed #aaa;
        box-sizing: border-box;
      .gpsItem{
        display: flex;
        flex-direction: column;
        span {
          display: inline-block;
          margin: 0;
          padding: 0;
          font-size: 14px;
          color: #606060;
        }
      }
        p {
          margin: 0;
          font-size: 18px;
          font-weight: 500;
        }
       
      }
      > div:nth-of-type(5) {
        span {
          display: block;
          background-color: #82d2dc;
          font-size: 14px;
          padding: 2px 25px;
          border-radius: 8px;
          color: white;
          cursor: pointer;
        }
      }
      > div:nth-of-type(6) {
        border: 0;
        p {
          display: block;
          background-color: #82d2dc;
          font-size: 14px;
          padding: 2px 20px;
          border-radius: 8px;
          color: white;
          cursor: pointer;
          margin-bottom: 10px;
        }
        span {
          display: block;
          background-color: #fd6d60;
          font-size: 14px;
          padding: 2px 20px;
          border-radius: 8px;
          color: white;
          cursor: pointer;
        }
      }
    }
    .venuseItemList {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;

      span:first-of-type {
        font-size: 20px;
        font-weight: 400;
        display: flex;
        align-items: center;

        .itemList {
          color: #fdd869;
          margin-right: 10px;
        }
      }
      span:last-of-type {
        display: block;
        padding: 5px 16px;
        color: white;
        font-size: 14px;
        background-color: #82dedc;
        border-radius: 10px;
        cursor: pointer;
      }
    }
    // 第二层折叠面板
    .demo-collapse-item {
      .movementTitle {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .movementType {
          font-size: 20px;
          font-weight: 500;
        }
        .controls {
          font-size: 27px;
          display: flex;
          align-items: center;
          .edit {
            color: #82d2dc;
            margin-right: 20px;
          }
          .del {
            color: #fc8e7e;
          }
        }
      }
    }
    .typeContent {
      padding-left: 100px;
      padding-right: 25px;
      .typeHeader {
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 15px;

        span {
          display: inline-block;
          padding: 4px 20px;
          background-color: #82d2dc;
          border-radius: 6px;
          margin-left: 20px;
          margin-right: 20px;
          color: white;
          cursor: pointer;
        }
        span:last-of-type {
          background-color: #eee;
          color: black;
        }
      }
      > p {
        margin: 0;
        line-height: 50px;
        font-size: 16px;
      }
      .contentTable {
        display: flex;
        justify-content: space-between;
      }
      table {
        width: 40%;
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #ddd;

        tr {
          display: flex;
          box-sizing: border-box;
          display: flex;
        }
        td {
          height: 100px;
          flex: 1;
          border-top: 0;
          border-left: 0;
          border: 1px dashed #ddd;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;

          > div {
            > p {
              margin: 0;
              font-size: 16px;
            }
            > div {
              color: #bbb;
              font-size: 11px;
              display: flex;
              align-items: center;
              span {
                display: inline-block;
                border: 1px solid #bbb;
                width: 32px;
                line-height: 14px;
                text-align: center;
                border-radius: 2px;
                margin: 0 2px;
              }
            }
          }
        }
      }
      .tableRight {
        width: 55%;
        height: 300px;
        border: 1px solid #ddd;
        .tableRightHeader,
        .tableRightMain,
        .tableRightFoot {
          display: flex;
          padding: 10px 0;
          border-bottom: 1px dashed #ddd;
          height: 100px;
          box-sizing: border-box;
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            border-right: 1px dashed #ddd;
            font-size: 16px;
          }
        }
        .tableRightHeader {
          div {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          div:first-of-type {
            span:last-of-type {
              display: inline-block;
              padding: 2px 25px;
              background-color: #82d2dc;
              border-radius: 5px;
              color: white;
              cursor: pointer;
            }
          }
        }
        .tableRightMain {
          div {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .tableRightFoot {
          border: 0;
          div {
            padding-left: 30px;
          }
          div:last-of-type {
            padding-right: 50px;
            align-items: end;
          }
        }
      }
    }
    .typeFoot {
      padding-left: 100px;
      padding-bottom: 20px;
      p {
        font-size: 20px;
        margin: 0;
        line-height: 50px;
      }
      span {
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        padding: 0 30px;
        border: 1px solid #ddd;
        margin-right: 20px;
        border-radius: 5px;
      }
    }
  }
  .pag {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // 新增修改场馆模态框
  .studModel {
    box-sizing: border-box;
    .studModeltitle {
      color: #fec469;
      margin-left: 20px;
    }
    .closeStudModel {
      font-size: 22px;
      display: inline-block;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 25px;
      text-align: center;
      color: #fec469;
      cursor: pointer;
      border: 2px solid #fec469;
    }
    .studModelMain {
      display: flex;
      .left {
        width: 45%;
        .address {
          width: 100%;
          display: flex;
          .addressInput {
            width: 27%;
            margin: 0 3.15%;
          }
        }
        .gps {
          display: inline-block;
          border-radius: 3px;
          width: 100%;
          border: 1px solid #ddd;
          font-size: 13px;
          overflow: hidden;
          white-space: nowrap; /* 不允许折行 */
          text-overflow: ellipsis; /* 超出范围的部分显示省略号 */
        }
        .foot {
          width: 100%;
          display: flex;
          justify-content: center;
        }
      }
      .right {
        width: 55%;
      }
    }
  }
  // 图片预览弹出窗
  .imgModel {
    .img {
      width: 100%;
      height: 100%;
      padding: 30px;
      box-sizing: border-box;
      img {
        width: 100%;
        object-fit: cover;
      }
    }
  }
  // 新增与修改运动类型模态框
  .sportModel {
    .sportMain {
      display: flex;
      .sportMainLeft {
        flex: 1;
        .typeContent {
          padding-left: 20px;
          .typeHeader {
            height: 50px;
            display: flex;
            align-items: center;
            font-size: 15px;

            span {
              display: inline-block;
              padding: 4px 20px;
              background-color: #82d2dc;
              border-radius: 6px;
              margin-left: 20px;
              margin-right: 20px;
              color: white;
              cursor: pointer;
            }
            span:last-of-type {
              background-color: #eee;
              color: black;
            }
          }
          > p {
            margin: 0;
            line-height: 50px;
            font-size: 16px;
          }
          .contentTable {
            display: flex;
            justify-content: space-between;
          }
          table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #ddd;

            tr {
              display: flex;
              box-sizing: border-box;
              display: flex;
            }
            td {
              height: 100px;
              flex: 1;
              border-top: 0;
              border-left: 0;
              border: 1px dashed #ddd;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;

              > div {
                > p {
                  margin: 0;
                  font-size: 16px;
                }
                > div {
                  margin-bottom: 5px;
                  color: #bbb;
                  font-size: 11px;
                  display: flex;
                  align-items: center;
                  span {
                    display: inline-block;
                    border: 1px solid #bbb;
                    width: 32px;
                    line-height: 14px;
                    text-align: center;
                    border-radius: 2px;
                    margin: 0 2px;
                  }
                }
              }
            }
          }
        }
      }
      .sportMainRight {
        flex: 1;
        .foot {
          margin-top: 30px;
          width: 100%;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>

<template>
  <div class="stadium">
    <header><span>场馆维护 / </span>场馆设置</header>
    <div class="stadiumSearch">
      <el-form :inline="true" :model="searchFrom" class="stadiumSearchFrom">
        <el-form-item label="场馆名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入你要查询的场馆名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getStadium()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="venues">
      <span>
        <el-icon class="itemList"><Tickets /></el-icon>
        场馆列表
      </span>
      <span @click="(addStadiumShow = true), (showEdit = false)">新增场馆</span>
    </div>
    <div class="venuesList">
      <div class="demo-collapse">
        <el-collapse accordion>
          <el-collapse-item
            :name="item.id"
            v-for="item in stadiumList"
            :key="item.id"
          >
            <template #title>
              <div class="titleLeft">
                <span class="mark">场馆</span>
                {{ item.name }}
                <span class="titleAddress">{{ item.detail }}</span>
              </div>
            </template>
            <div class="venuesListInfo">
              <div class="venuesListInfoItem">
                <p>联系人</p>
                <span>{{ item.concat }}</span>
              </div>
              <div class="venuesListInfoItem">
                <p>联系方式</p>
                <span>{{ item.phone }}</span>
              </div>
              <div class="venuesListInfoItem">
                <p>GPS</p>
                <div class="gpsItem"><span>经度{{ item.longtitude }}</span> <span>维度{{ item.latitude }}</span></div>
              </div>
              <div class="venuesListInfoItem">
                <p>面积</p>
                <span>{{ item.area }}㎡</span>
              </div>
              <div class="venuesListInfoItem">
                <p>图册</p>
                <span @click="showImg(item.gallery)">浏览</span>
              </div>
              <div class="venuesListInfoItem">
                <p @click="toEidt(item)">修改</p>
                <span @click="toDel(item)">删除</span>
              </div>
            </div>
            <div class="venuseItemList">
              <span>
                <el-icon class="itemList"><Tickets /></el-icon>
                项目列表
              </span>
              <span @click="toAddSport(item)">新增项目列表</span>
            </div>
            <div class="demo-collapse demo-collapse-item">
              <el-collapse accordion>
                <el-collapse-item
                  :name="itemChild.id"
                  v-for="itemChild in item.sports"
                  :key="itemChild.id"
                >
                  <template #title>
                    <div class="movementTitle">
                      <span class="movementType">{{
                        itemChild.sport_type_codeName
                      }}</span>
                      <div class="controls">
                        <el-icon class="edit" @click="toEditSport(itemChild)"
                          ><InfoFilled
                        /></el-icon>
                        <el-icon class="del" @click="toDelSport(itemChild.id)"
                          ><CircleCloseFilled
                        /></el-icon>
                      </div>
                    </div>
                  </template>
                  <div class="typeContent">
                    <div class="typeHeader">
                      营业类型
                      <span>正常营业时间</span>
                      <span>临时营业时间</span>
                    </div>
                    <p>营业时间</p>
                    <div class="contentTable">
                      <table>
                        <tr>
                          <td>
                            <div>
                              <p>周一</p>
                              <div>
                                <span>{{ itemChild.day1.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day1.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day1.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day1.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div>
                              <p>周二</p>
                              <div>
                                <span>{{ itemChild.day2.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day2.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day2.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day2.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div>
                              <p>周三</p>
                              <div>
                                <span>{{ itemChild.day3.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day3.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day3.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day3.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>
                            <div>
                              <p>周四</p>
                              <div>
                                <span>{{ itemChild.day4.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day4.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day4.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day4.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div>
                              <p>周五</p>
                              <div>
                                <span>{{ itemChild.day5.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day5.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day5.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day5.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div>
                              <p>周六</p>
                              <div>
                                <span>{{ itemChild.day6.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day6.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day6.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day6.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>
                            <div>
                              <p>周日</p>
                              <div>
                                <span>{{ itemChild.day7.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day7.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day7.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day7.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div>
                              <p>节假日</p>
                              <div>
                                <span>{{ itemChild.day8.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day8.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day8.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day8.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div>
                              <p>调整日</p>
                              <div>
                                <span>{{ itemChild.day9.substr(0, 4) }}</span
                                >一<span>{{
                                  itemChild.day9.substr(5, 5)
                                }}</span>
                              </div>
                              <div>
                                <span>{{ itemChild.day9.substr(11, 5) }}</span
                                >一<span>{{
                                  itemChild.day9.substr(17, 5)
                                }}</span>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </table>
                      <div class="tableRight">
                        <div class="tableRightHeader">
                          <div>
                            <span>图册</span>
                            <span @click="showImg(itemChild.gallery)"
                              >浏览</span
                            >
                          </div>
                          <div>
                            <span>预定类型</span>
                            <span>场地</span>
                          </div>
                          <div>
                            <span>状态</span>
                            <span>上线</span>
                          </div>
                        </div>
                        <div class="tableRightMain">
                          <div>
                            <span>平台预定天数</span>
                            <span>{{ itemChild.book_day }}</span>
                          </div>
                          <div>
                            <span>平台退订天数</span>
                            <span>{{ itemChild.cancel_day }}</span>
                          </div>
                        </div>
                        <div class="tableRightFoot">
                          <div>
                            <span>联系人:&emsp;{{ itemChild.concat }}</span>
                            <span>联系方式:{{ itemChild.phone }}</span>
                            <span>订场电话:{{ itemChild.msg_phone }}</span>
                          </div>
                          <div>
                            <span>接收消息号:{{ itemChild.book_phone }}</span>
                            <span>{{ itemChild.msg_phone }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="typeFoot">
                    <p>服务</p>
                    <span>停车场</span>
                    <span>洗浴</span>
                    <span>WiFi</span>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pag">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="currentChange"
        :total="searchForm.total"
        v-model:page-size="searchForm.size"
      />
    </div>
    <!-- 图片预览弹出窗 -->
    <div class="imgModel">
      <el-dialog v-model="imgShow" width="50%" align-center>
        <div class="img">
          <img :src="item" v-for="(item, index) in imgUrl" :key="index" />
        </div>
      </el-dialog>
    </div>
    <!-- 添加和修改场馆弹出框 -->
    <div class="studModel">
      <el-dialog v-model="addStadiumShow" :show-close="false" width="70%">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <div :id="titleId" :class="titleClass">
              <el-icon><DocumentAdd /></el-icon>
              <span class="studModeltitle">新增/修改场馆</span>
            </div>
            <span @click="close" class="closeStudModel">×</span>
          </div>
        </template>
        <div class="studModelMain">
          <div class="left">
            <el-form
              :inline="true"
              :model="addForm"
              class="addStadiumForm"
              label-width="100px"
            >
              <el-form-item label="场馆名称" prop="name">
                <el-input
                  v-model="addStadiumForm.name"
                  placeholder="请输入场馆名称"
                />
              </el-form-item>
              <el-form-item>
                <div class="address">
                  <el-input
                    v-model="addStadiumForm.province"
                    placeholder="省"
                    readonly="true"
                    class="addressInput"
                  />
                  <el-input
                    v-model="addStadiumForm.city"
                    placeholder="市"
                    readonly="true"
                    class="addressInput"
                  />
                  <el-input
                    v-model="addStadiumForm.region"
                    placeholder="区"
                    readonly="true"
                    class="addressInput"
                  />
                </div>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input
                  v-model="addStadiumForm.detail"
                  placeholder="请输入详细地址"
                />
              </el-form-item>
              <el-form-item label="GPS">
                <span class="gps"
                  >经度：{{ addStadiumForm.longtitude }}经度：{{
                    addStadiumForm.longtitude
                  }}</span
                >
              </el-form-item>
              <el-form-item label="面积">
                <el-input
                  v-model="addStadiumForm.area"
                  placeholder="请输入场馆面积"
                />
              </el-form-item>
              <el-form-item label="联系人">
                <el-input
                  v-model="addStadiumForm.concat"
                  placeholder="请输入联系人"
                />
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  v-model="addStadiumForm.phone"
                  placeholder="请输入联系方式"
                />
              </el-form-item>
              <el-form-item label="图册" prop="avatar">
                <el-upload
                  class="avatar-uploader"
                  action="http://dida100.com:8889/api/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img
                    v-if="addStadiumForm.gallery"
                    :src="addStadiumForm.gallery"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>
              <div class="foot">
                <el-button type="primary" @click="editStadium" v-if="showEdit"
                  >修改</el-button
                >
                <el-button type="primary" @click="addStadium" v-else
                  >保存</el-button
                >
              </div>
            </el-form>
          </div>
          <div class="right">
            <baidu-map
              class="bm-view"
              :center="center"
              :zoom="12"
              :scroll-wheel-zoom="true"
              @ready="ready"
              @click="mapClick"
            >
              <bm-marker
                :position="point"
                animation="BMAP_ANIMATION_BOUNCE"
                :dragging="true"
                @dragend="mapClick"
              >
              </bm-marker>
            </baidu-map>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 添加与修改运动项目弹出窗 -->
    <div class="sportModel studModel">
      <el-dialog v-model="addSportShow" :show-close="false" width="70%">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <div :id="titleId" :class="titleClass">
              <el-icon><DocumentAdd /></el-icon>
              <span class="studModeltitle">新增/修改项目</span>
            </div>
            <span @click="close" class="closeStudModel">×</span>
          </div>
        </template>

        <div class="sportMain">
          <div class="sportMainLeft">
            <el-form
              :inline="true"
              :model="addForm"
              class="addStadiumForm"
              label-width="100px"
            >
              <el-form-item label="项目名称">
                <el-input
                  v-model="addSportForm.sport_type_codeName"
                  placeholder="请输入项目名称"
                />
              </el-form-item>
              <el-form-item label="预定类型">
                <el-select v-model="value" class="m-2" placeholder="Select">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="预定天数">
                <el-input
                  v-model="addSportForm.book_day"
                  placeholder="请输入预定天数"
                />
              </el-form-item>
              <el-form-item label="退订天数">
                <el-input
                  v-model="addSportForm.cancel_day"
                  placeholder="请输入退订天数"
                />
              </el-form-item>
              <div class="typeContent">
                <div class="typeHeader">
                  营业类型
                  <span>正常营业时间</span>
                  <span>临时营业时间</span>
                </div>
                <p>营业时间</p>
                <div class="contentTable">
                  <table>
                    <tr>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <p>周一</p>
                          <div><span>8:00</span>一<span>12:00</span></div>
                          <div><span>14:00</span>一<span>21:00</span></div>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </el-form>
          </div>
          <div class="sportMainRight">
            <el-form
              :inline="true"
              :model="addForm"
              class="addStadiumForm"
              label-width="100px"
            >
              <el-form-item label="联系人">
                <el-input
                  v-model="addSportForm.name"
                  placeholder="请输入联系人"
                />
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  v-model="addSportForm.phone"
                  placeholder="请输入联系方式"
                />
              </el-form-item>
              <el-form-item label="订场电话">
                <el-input
                  v-model="addSportForm.book_phone"
                  placeholder="请输入订场电话"
                />
              </el-form-item>
              <el-form-item label="消息手机">
                <el-input
                  v-model="addSportForm.msg_phone"
                  placeholder="请输入消息手机"
                />
              </el-form-item>
              <el-form-item label="图册" prop="avatar">
                <el-upload
                  class="avatar-uploader"
                  action="http://dida100.com:8889/api/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess1"
                >
                  <img
                    v-if="addSportForm.gallery"
                    :src="addSportForm.gallery"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item label="场地材质">
                <el-input
                  v-model="addSportForm.material"
                  placeholder="请输入场地材质"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 10 }"
                  placeholder="请输入内容"
                  v-model="addSportForm.note"
                />
              </el-form-item>
              <div class="foot">
                <el-button
                  type="primary"
                  @click="editSport"
                  v-if="showSportEdit"
                  >修改</el-button
                >
                <el-button type="primary" @click="addSport" v-else
                  >保存</el-button
                >
              </div>
            </el-form>
          </div>
        </div>
      </el-dialog>
      <!-- 新增弹框结束 -->
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
// 引入获取场馆设置接口 添加 删除 修改  运动项目 添加 修改 删除
import {
  GetStadium,
  AddStadium,
  EditStadium,
  DelStadium,
  AddSport,
  EditSport,
  DelSport,
} from "../../../../api/stadium";
import { ref } from "vue";
// 搜索的条件 searchForm
const searchForm = ref({ name: "", size: 10, order: "asc" });
// 存储中心
const center = ref({ lng: 116.404, lat: 39.915 });
const point = ref({ lng: 116.404, lat: 39.915 });
const BMapGL = ref();
const address = ref({});
//数据
const stadiumList = ref();
// 图片预览时存储的图片地址
const imgUrl = ref("");

//新增场馆的数据
const addStadiumForm = ref({
  id: "",
  name: "",
  detail: "",
  area: "",
  concat: "",
  phone: "",
  gallery: "",
  longtitude: "",
  latitude: "",
  province: "",
  city: "",
  region: "",
  company_id: "",
  note: "",
});
//新增运动类型的数据
const addSportForm = ref({
  name:'',
  phone:'',
  company_id: "",
  stadium_id: "",
  id: "",
  sport_type_codeName: "",
  book_day: "",
  cancel_day: "",
  contactName: "",
  book_phone: "",
  msg_phone: "",
  telephone: "",
  material: "",
  sport_type_code: "",
  gallery: "",
  day1: "8:00-12:00,14:00-21:00",
  day2: "8:00-12:00,14:00-21:00",
  day3: "8:00-12:00,14:00-21:00",
  day4: "8:00-12:00,14:00-21:00",
  day5: "8:00-12:00,14:00-21:00",
  day6: "8:00-12:00,14:00-21:00",
  day7: "8:00-12:00,14:00-21:00",
  day8: "8:00-12:00,14:00-21:00",
  day9: "8:00-12:00,14:00-21:00",
  note: "",
});
// 添加与修改场馆弹出框显示与隐藏
const addStadiumShow = ref(false);
// 修改与保存显示隐藏
const showEdit = ref(false);
const addSportShow = ref(false);
const showSportEdit = ref(false);
// 图片预览显示
const imgShow = ref(false);
// 获取场馆设置数据
const getStadium = () => {
  GetStadium(searchForm.value).then((res) => {
    stadiumList.value = res.data.data;
    searchForm.value.total = res.data.pagination.total;
    searchForm.value.size = res.data.pagination.size;
    searchForm.value.current = res.data.pagination.current;
  });
};
getStadium();
// 分页
const currentChange = (val) => {
  searchForm.value.current = val;
  getStadium();
};

// 地图
// 地图准备完毕
const ready = ({ BMap, map }) => {
  BMapGL.value = BMap;
  // 获取当前城市
  function myFun(result) {
    var cityName = result.name;
    // 获取城市对应经度和纬度
    var myGeo = new BMap.Geocoder();
    myGeo.getPoint(cityName, function (p) {
      // p就是经度与纬度
      map.centerAndZoom(p, 11);
      // 把小点移动到 p位置
      point.value = p;
    });
  }
  var myCity = new BMap.LocalCity();
  myCity.get(myFun);
};
// 地图添加一个单击事件,获取点击的位置
const mapClick = (e) => {
  // 红点的位置为点击的位置
  addStadiumForm.value.longtitude = point.value.lng = e.point.lng;
  addStadiumForm.value.latitude = point.value.lat = e.point.lat;
  // 根据点的位置 解析当前的地址
  var myGeo = new BMapGL.value.Geocoder();
  // 根据坐标得到地址描述
  myGeo.getLocation(point.value, function (result) {
    if (result) {
      // alert(result.address);
      addStadiumForm.value.detail = result.address;
      addStadiumForm.value.province = result.addressComponents.province;
      addStadiumForm.value.city = result.addressComponents.city;
      addStadiumForm.value.region = result.addressComponents.district;
      result.addressComponents.address = result.addressComponents;
      address.value = result.addressComponents;
    }
  });
};
// 新增场馆
const addStadium = () => {
  console.log(addStadiumForm.value);
  AddStadium(addStadiumForm.value)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        addStadiumShow.value = false;
        getStadium();
        addStadiumForm.value = {
          id: "",
          name: "",
          detail: "",
          area: "",
          concat: "",
          phone: "",
          gallery: "",
          longtitude: "",
          latitude: "",
          province: "",
          city: "",
          region: "",
          company_id: "",
          note: "",
        };
      } else {
        ElMessage({
          message: "添加失败",
          type: "warning",
        });
      }
    })
    .catch(() => {
      ElMessage.error(" 错误");
    });
};
// 处理上传
const handleAvatarSuccess = (
  response
  // uploadFile
) => {
  addStadiumForm.value.gallery = "http://dida100.com:8889" + response.file.path;
};
const handleAvatarSuccess1 = (
  response
  // uploadFile
) => {
  addSportForm.value.gallery = "http://dida100.com:8889" + response.file.path;
};
// 修改场馆
const toEidt = (item) => {
  //显示编辑按钮
  showEdit.value = true;
  // 显示弹框
  addStadiumShow.value = true;
  // 定义弹框的内容是编辑的item解构
  addStadiumForm.value = { ...item };
};
// 定义修改方法
const editStadium = () => {
  EditStadium(addStadiumForm.value)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        addStadiumShow.value = false;
        getStadium();
        showEdit.value = false;
        addStadiumForm.value = {
          id: "",
          name: "",
          detail: "",
          area: "",
          concat: "",
          phone: "",
          gallery: "",
          longtitude: "",
          latitude: "",
          province: "",
          city: "",
          region: "",
          company_id: "",
          note: "",
        };
      } else {
        ElMessage({
          message: "修改失败",
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err.data.msg);
    });
};
// 删除
const toDel = (item) => {
  ElMessageBox.confirm("删除不可逆，确认删除吗？", "删除", {
    confirmButtonText: "确定删除",
    cancelButtonText: "取消删除",
    type: "warning",
  })
    .then(() => {
      DelStadium(item.id)
        .then((res) => {
          if (res.data.code == 0) {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            getStadium();
          } else {
            ElMessage({
              type: "warning",
              message: "删除失败",
            });
          }
        })
        .catch((err) => {
          ElMessage.error(err.data.msg);
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除成功",
      });
    });
};
// 预览图片
const showImg = (url) => {
  // 显示图片预览模态框
  imgShow.value = true;
 if(url==null){
  imgUrl.value ="";
 }else{
    imgUrl.value = url.split(",");
  }
};
// 新增项目列表
const toAddSport = (item) => {
  // 清空一下
  addSportForm.value = {
    name:'',
  phone:'',
    company_id: "",
    stadium_id: "",
    id: "",
    sport_type_codeName: "",
    book_day: "",
    cancel_day: "",
    contactName: "",
    book_phone: "",
    msg_phone: "",
    telephone: "",
    material: "",
    sport_type_code: "",
    gallery: "",
    day1: "8:00-12:00,14:00-21:00",
    day2: "8:00-12:00,14:00-21:00",
    day3: "8:00-12:00,14:00-21:00",
    day4: "8:00-12:00,14:00-21:00",
    day5: "8:00-12:00,14:00-21:00",
    day6: "8:00-12:00,14:00-21:00",
    day7: "8:00-12:00,14:00-21:00",
    day8: "8:00-12:00,14:00-21:00",
    day9: "8:00-12:00,14:00-21:00",
    note: "",
  };
  // 显示弹窗
  addSportShow.value = true;
  // 隐藏弹框修改按钮
  showSportEdit.value = false;
  addSportForm.value.company_id = item.company_id;
  addSportForm.value.stadium_id = item.id;
};
// 添加运动类型项目方法
const addSport = () => {
  AddSport(addSportForm.value)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        addSportShow.value = false;
        getStadium();
        addSportForm.value = {
          name:'',
           phone:'',
          company_id: "",
          stadium_id: "",
          id: "",
          sport_type_codeName: "",
          book_day: "",
          cancel_day: "",
          contactName: "",
          book_phone: "",
          msg_phone: "",
          telephone: "",
          material: "",
          sport_type_code: "",
          gallery: "",
          day1: "8:00-12:00,14:00-21:00",
          day2: "8:00-12:00,14:00-21:00",
          day3: "8:00-12:00,14:00-21:00",
          day4: "8:00-12:00,14:00-21:00",
          day5: "8:00-12:00,14:00-21:00",
          day6: "8:00-12:00,14:00-21:00",
          day7: "8:00-12:00,14:00-21:00",
          day8: "8:00-12:00,14:00-21:00",
          day9: "8:00-12:00,14:00-21:00",
          note: "",
        };
      } else {
        ElMessage({
          message: "添加失败",
          type: "warning",
        });
      }
    })
    .catch(() => {
      ElMessage.error(" 错误");
    });
};
// 修改运动项目
const toEditSport = (itemChild) => {
  // 显示弹窗
  addSportShow.value = true;
  // 显示弹框的修改按钮
  showSportEdit.value = true;
  addSportForm.value = Object.assign(addSportForm.value, { ...itemChild });
};
const editSport = () => {
  EditSport(addSportForm.value)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        addSportShow.value = false;
        getStadium();
        showEdit.value = false;
        addSportForm.value = {
          name:'',
          phone:'',
          company_id: "",
          stadium_id: "",
          id: "",
          sport_type_codeName: "",
          book_day: "",
          cancel_day: "",
          contactName: "",
          book_phone: "",
          msg_phone: "",
          telephone: "",
          material: "",
          sport_type_code: "",
          gallery: "",
          day1: "8:00-12:00,14:00-21:00",
          day2: "8:00-12:00,14:00-21:00",
          day3: "8:00-12:00,14:00-21:00",
          day4: "8:00-12:00,14:00-21:00",
          day5: "8:00-12:00,14:00-21:00",
          day6: "8:00-12:00,14:00-21:00",
          day7: "8:00-12:00,14:00-21:00",
          day8: "8:00-12:00,14:00-21:00",
          day9: "8:00-12:00,14:00-21:00",
          note: "",
        };
      } else {
        ElMessage({
          message: "修改失败",
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err.data.msg);
    });
};
// 删除运动项目
const toDelSport = (id) => {
  ElMessageBox.confirm("删除不可逆，确认删除吗？", "删除", {
    confirmButtonText: "确定删除",
    cancelButtonText: "取消删除",
    type: "warning",
  })
    .then(() => {
      DelSport(id)
        .then((res) => {
          if (res.data.code == 0) {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            getStadium();
          } else {
            ElMessage({
              type: "warning",
              message: "删除失败",
            });
          }
        })
        .catch((err) => {
          ElMessage.error(err.data.msg);
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除成功",
      });
    });
};
</script>
